import React, {
    Component,
} from 'react'
import { connect } from 'react-redux';
import { View, Text, Image, StyleSheet, TouchableOpacity, TextInput, Keyboard } from 'react-native'
import { SafeAreaView } from 'react-navigation'
import { NavigationHeader } from '../../components'
import { Px } from '../../utils'
import {AssetImages} from '../../constants';

class VideoAdd extends Component {

    static propTypes = {

    };

    // 生命周期
    constructor(props) {
        super(props)
        this.state = {
            text: ''
        }
    }

    // render part
    render() {
        return (
            <SafeAreaView style={{ backgroundColor: '#fff', flex: 1}}>
                <NavigationHeader
                    style={{ backgroundColor: '#fff' }}
                    title="作品"
                    rightButton={this._renderRightButton()}
                    // navigation={this.props.navigation}
                    leftButtonShow={false}
                />
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={() => Keyboard.dismiss()}
                    style={{flex:1}}>
                    <View style={styles.listView}>
                        <View style={{ width: Px(100), backgroundColor: '#fff', paddingVertical: Px(10), alignItems: 'center', borderRadius: Px(12) }}>
                            <Text>标题</Text>
                        </View>
                        
                        <TextInput
                            style={{ height: Px(60), borderColor: '#e0e0e0', flex: 1, backgroundColor: '#fff', marginLeft: Px(24) }}
                            onChangeText={(text) => this.setState({ title: text })}
                            value={this.state.title}
                        />
                    </View>
                    <View style={styles.listView}>
                        <View style={{ width: Px(100), backgroundColor: '#fff', paddingVertical: Px(10), alignItems: 'center', borderRadius: Px(12) }}>
                            <Text>主题</Text>
                        </View>
                        <TouchableOpacity
                            style={{ marginLeft: Px(24), width: Px(160), alignItems: 'center', borderRadius: Px(6), backgroundColor: '#999', paddingVertical: Px(10) }}
                        >
                            <Text>剧本1</Text>
                        </TouchableOpacity>
                        <TextInput
                            style={{ height: Px(60), borderColor: '#e0e0e0', flex: 1, backgroundColor: '#fff', marginLeft: Px(24) }}
                            onChangeText={(text) => this.setState({ subTitle: text })}
                            value={this.state.subTitle}
                        />
                    </View>
                    <View style={styles.listView}>
                        <View style={{ width: Px(100), backgroundColor: '#fff', paddingVertical: Px(10), alignItems: 'center', borderRadius: Px(12) }}>
                            <Text>宠物</Text>
                        </View>
                        <TouchableOpacity
                            style={{ flex: 1, marginLeft: Px(24), width: Px(160), alignItems: 'center', borderRadius: Px(6), backgroundColor: '#999', paddingVertical: Px(10) }}
                        >
                            <Text>宠物1</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.listView}>
                        <View style={{ width: Px(100), backgroundColor: '#fff', paddingVertical: Px(10), alignItems: 'center', borderRadius: Px(12) }}>
                            <Text>简介</Text>
                        </View>
                        <TextInput
                            style={{ height: Px(60), flex: 1, backgroundColor: '#fff', marginLeft: Px(24), height: Px(120) }}
                            multiline={true}
                            onChangeText={(text) => this.setState({ text })}
                            value={this.state.text}
                        />
                    </View>
                    <View style={{
                        flexDirection: 'row',
                        backgroundColor: '#f4dab2',
                        paddingVertical: Px(14),
                        alignItems: 'center',
                        paddingHorizontal: Px(16)}}>
                        <TouchableOpacity style={{}}>
                            <Image
                                source={AssetImages.DEFAULT_PET_IMAGE}
                                style={styles.addVideoBtnImage}
                            />
                        </TouchableOpacity>
                        <View style={{ flex: 1, marginLeft: Px(24)}}>
                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <View style={{ width: Px(100), backgroundColor: '#fff', paddingVertical: Px(10), alignItems: 'center', borderRadius: Px(12) }}>
                                    <Text>分镜头</Text>
                                </View>
                                <TextInput
                                    style={{
                                        height: Px(60),
                                        marginLeft: Px(24),
                                        flex: 1,
                                        backgroundColor: '#fff'
                                    }}
                                />
                            </View>
                            <View style={{ height: Px(200)}}>
                                <TextInput
                                    style={{
                                        marginTop: Px(14),
                                        flex: 1,
                                        height: Px(200),
                                        backgroundColor: '#fff'
                                    }}
                                    multiline={true}
                                />
                            </View>
                            <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: Px(14)}}>
                                <TouchableOpacity>
                                    <View style={{ width: Px(100), backgroundColor: '#fff', paddingVertical: Px(10), alignItems: 'center', borderRadius: Px(12) }}>
                                        <Text>录制</Text>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity>
                                    <View style={{ width: Px(100), backgroundColor: '#fff', paddingVertical: Px(10), alignItems: 'center', borderRadius: Px(12) }}>
                                        <Text>剪辑</Text>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity>
                                    <View style={{ width: Px(100), backgroundColor: '#fff', paddingVertical: Px(10), alignItems: 'center', borderRadius: Px(12) }}>
                                        <Text>删除</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>           
                    </View>
                </TouchableOpacity>
                <View style={{flexDirection: 'row', height: Px(80), backgroundColor: '#fff', alignItems: 'center', justifyContent: 'space-around'}}>
                    <TouchableOpacity>
                        <View style={{ paddingHorizontal: Px(30), paddingVertical: Px(14),backgroundColor:'#ebb4b4', borderRadius: Px(24)}}>
                            <Text>合并视频</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <View style={{ paddingHorizontal: Px(30), paddingVertical: Px(14), backgroundColor: '#ebb4b4', borderRadius: Px(24) }}>
                            <Text>上传视频</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </SafeAreaView>
        )
    }

    _renderRightButton() {
        return (
            <TouchableOpacity
                style={{backgroundColor:'#c9e9a4', paddingHorizontal: Px(6), paddingVertical: Px(6), alignItems: 'center', justifyContent: 'center', borderRadius: Px(3) }}
            >
                <Text style={{ fontSize: Px(22)}}>添加分镜头</Text>
            </TouchableOpacity>
        )
    }

}

const styles = StyleSheet.create({
    addVideoBtnImage: {
        width: Px(200),
        height: Px(200)
    },
    listView: {
        flexDirection: 'row',
        backgroundColor: '#f1e9e9',
        paddingVertical: Px(14),
        alignItems: 'center',
        paddingHorizontal: Px(16),
        marginTop: Px(3)
    }
})
export default connect(state => ({

})
)(VideoAdd)